<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1>The Goods Page</h1>
        <form th:action="@{/goods/doFindGoods}" method="get">
            <input type="text"  name="name">
            <input type="submit" class="btn btn-primary btn-sm" onclick="doFindObjects()" value="查询">
            <input type="button" class="btn btn-primary btn-sm" onclick="doLoadGoodsAddUI()" value="添加商品">
        </form>
        <!--<button onclick="doFindObjects()">查询</button>-->
        <!--<a th:href="@{/goods/dooodGsAddUI}">添加商品</a>-->
        <<!--button onclick="doLoadGoodsAddUI()">添加商品</button>-->
        <table class="table">
            <!--/* 定义表头部分 */-->
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>remark</th>
                    <th>createTime</th>
                    <th>operation</th>
                </tr>
            </thead>
            <!--/* 定义表体部分 */-->
            <tbody>
                <!--/* th:each 为thymeleaf中定义的迭代标签属性 ，需要循环创建哪些元素，th:each就写在哪个元素内部*/-->
                <tr th:each="g:${list}"><!--/* 这里的g表示集合中的某一个元素，可以自己起名字*/-->
                    <td th:text="${g.id}">1</td><!--/* g.id时访问g指向对象的getId方法*/-->
                    <td th:text="${g.name}">A</td>
                    <td th:text="${g.remark}">A..</td>
                    <!--<td th:text="${g.createdTime}">2020/12/31</td>-->
                    <td th:text="${#dates.format(g.createdTime,'dd-MM-yy HH:mm')}">2020/12/31</td>
                    <td><button class="btn btn-danger btn-xs" th:onclick="doDeleteById([[${g.id}]])">delete</button></td>
                   <!--<td><a th:href="@{/goods/doDeleteById(id=${g.id})}">delete</a></td>-->
                    <td><button class="btn btn-warning btn-xs" th:onclick="doFindById([[${g.id}]])">update</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // var domain="http://localhost"
        function doFindById(id){
            location.href=`/goods/doFindById/${id}`;
        }
        function doLoadGoodsAddUI(){
            location.href=`/goods/doGoodsAddUI`;
        }
        function doDeleteById(id){

            //Get请求
            //注意，这里等号右边使用了反引号``，在反引号内部可以使用${}表达式获取变量的值
            //location.href="http://localhost/goods/doDeleteById?id="+id;
            //location.href=`http://localhost/goods/doDeleteById?id=${id}`;
            //location.href=`${domain}/goods/doDeleteById?id=${id}`;
            //location.href=`/goods/doDeleteById?id=${id}`;//这个url会替换当前url中port后面“/”后面的内容
            location.href=`doDeleteById?id=${id}`;//这个url会替换当前url中最后一个“/”后面的内容

        }
    </script>
</body>
</html>